import React, { useReducer } from 'react'

function reducer(state, action) {
    let num = state;
    switch (action.type) {
        case 'increment':
            num += action.payload;
            break;
        default:
            num -= action.payload;
            break;
    }
    return num;
}

function UseReducer() {
    const [num, dispatch] = useReducer(reducer, 0);
    const increment = () => { dispatch({ type: 'increment', payload: 2 }) }
    const decrement = () => { dispatch({ type: 'decrement', payload: 3 }) }
    return (
        <div className="container">
			<div className="wrapper">
				<h4 className="display-4">{num}</h4>
				<button onClick={increment} className="btn btn-primary">自增</button>
				<button onClick={decrement} className="ml-2 btn btn-danger">自减</button>
			</div>
		</div>
    )
}

export default UseReducer